<template>
    <div class="loginview">
        <audio src="https://ziyuan.windbless.top/sounds/%E4%BD%A0%E7%9C%9F%E6%A3%92%EF%BC%8C%E6%95%85%E4%BA%8B%E5%BD%95%E9%9F%B3%E5%B7%B2%E5%AE%8C%E6%88%90%EF%BC%81.mp3" ref="finishref" @ended="enddd"></audio>
        <div class="stratbtn" @click="entergame">
            你真棒，故事录音已完成！
        </div>

    </div>

</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { useAuthStore } from '@/store/index.ts'
const router = useRouter();
const finishref = ref();
const store = useAuthStore();
//判断进入游戏
const entergame = (x) => {
    finishref.value.play();
}
//点击确认后的回调函数

const enddd = () => {
    router.push("/");
}
onMounted(async () => {
    const iframe = document.getElementById("iframe");
    if (iframe) {
        iframe.parentNode.removeChild(iframe);
    }
})

</script>
<style lang="scss" scoped>
.setting {
    position: absolute;
    height: 4rem;
    top: 2rem;
    right: 20rem;
}

.loginview {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    gap: 2rem;



    @mixin tt {
        text-decoration: none;
        cursor: pointer;
    }

    .stratbtn {
        background-color: antiquewhite;
        font-size: 4rem;
        width: 40rem;
        padding: 2rem;
        border-radius: 1rem;
        @include tt;
    }

    .game5btn {
        background-color: antiquewhite;
        font-size: 4rem;
        width: 20rem;
        padding: 2rem;
        border-radius: 1rem;
        @include tt;
    }
}
</style>